<template>
  <div class='container'>
    <header>
      <div class="header_title">
        欢迎注册
      </div>
    </header>
    <section >
      <div class="item">
        <div>
          <div class="item_title">用户名</div>
        </div>
        <div> <input @keyup="checkname" @change="checkname" v-model="registereForm.username " type="text" placeholder="请输入手机/邮箱"> </div>
        <span v-text="msgame" :style="styles" ></span>

      </div>
      <div class="item">
        <div>
          <div class="item_title">登录密码</div>
        </div>
        <div> <input  @keyup="checkpassword"  @change="checkpassword" v-model="registereForm.password" type="password" placeholder="请输入登录密码"> </div>
        <span v-text="msgpassword" :style="styles" ></span>
      </div>
      <div class="item">
        <div>
          <div class="item_title">确认密码</div>
        </div>
        <div> <input @keyup="checkpwd" @change="checkpwd" v-model="registereForm.password2"   type="password" placeholder="请输入确认的密码"> </div>
        <span v-text="msgpwd" :style="styles" ></span>
      </div>
      <div class="item">
        <div>
          <div  class="item_title">邀请人</div>
        </div>
        <div> <input v-model="registereForm.code" type="text" placeholder="请输入邀请人账号"> </div>
      </div >
      <div class="item">
        <div>
          <div  class="item_title">手机号码</div>
        </div>
        <div> <input v-model="registereForm.mobile" type="text" placeholder="请输入手机号码"> </div>
      </div >
      <div class="item verification-item">
        <div> <input v-model="registereForm.verifyCode" type="text" placeholder="验证码" style="width: 150px;"> </div>
        <div class="verification" @click="verificationClick"  :class="[disabled?'pointer-none':'pointer-auto']">
          <div  class="item_title verification-text">
            <span class="verification-span"   v-html="btntxt" ></span>
          </div>
        </div>
      </div >
      <div class="item item_submit" >
        <div  :class="[click?'sumbit':'sumbit1']"   style="width: 80px" @click="registerClick" >
          注册
        </div>
      </div>
    </section>
    <footer>
      <downloadCenter></downloadCenter>
    </footer>
  </div>
</template>
<script>
import { save } from '@/api/user';
import {sendMsg } from '@/api/user'
import machId from '@/utils/globalVariable'
import downloadCenter from './components/downloadCenter'
import md5 from 'js-md5';
export default {
  name: "register.vue",
  components: {
    downloadCenter
  },
  watch: {
    $route (newVal, oldVal) {
      if ( newVal.query.xuid!=this.registereForm.xuid) {
        this.registereForm.xuid = newVal.query.xuid;
        this.registereForm.code = newVal.query.code;
      }
    },
  },

  data(){
    return{
      disabled: false,
      time: 0,
      btntxt:"获取验证码",
      click:true,
      registereForm: {
        Authorization: '',
        mchId: '',
        password: '',
        password2:'',
        username : '',
        xuid:'',
        mobile:'',
        verifyCode:'',
        code:'',
      },
      msgame:"",
      msgmail:"",
      msgpassword:"",
      msgpwd:"",
      msgage:"",
      msgphone:"",
      name:"",
      email:"",
      password:"",
      pwd:"",
      phone:"",
      styles: {
        color: 'red'
      },
      rule:false
    }
  },
  methods:{
    verificationClick() {
      if (this.registereForm.mobile == "" ||  !/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.registereForm.mobile)) {
        this.$message({
          message: '请输入正确手机号码',
          type: 'error'
        });
        return;
      }

      if (this.time == 0) {
        this.getSendMsg()
      }
      this.time = 30;
      this.timer();

      // sendMsg({
      //   username: this.registereForm.mobile,
      //   tplKey: "register",
      //   mchId: machId,
      // }).then((res) => {
      //       this.timer();
      //       this.isShow = false;
      //       console.log(res);
      //     }).catch((error) => {
      //       console.log(error);
      //     });
    },
    timer() {
      console.log("timertimertimertimertimer")
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btntxt = this.time + "秒";
        console.warn(this.btntxt)
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = '重新发送'
        this.disabled = false;
      }
    },

    getSendMsg() {
      sendMsg({
        tplKey: 'register',
        username: this.registereForm.mobile //从上一个页面手机号传值（mobile）
      }).then(res => {
        if (res.type == "success") {
          eeui.toast({
            message: '验证码已发送'
          })
        }else{
          eeui.toast({
            message: '验证码发送失败，请稍后重试！'
          })
        }
      })
    },
    getCode(){
      this.registereForm.code = this.$route.query.code;
    },
    registerClick(){
        this.checkname()
        this.checkpwd()
        this.checkpassword()
        if( this.msgame =="" && this.msgpwd =="输入密码正确" && this.msgpwd =="输入密码正确" && this.msgphone==""){
          this.click =false
          this.registereForm.xuid = this.$route.query.xuid
          let addregistereForm = {
            username : 'mch_'+machId+'_'+this.registereForm.username,
            password: md5(this.registereForm.password),
            xuid:this.registereForm.xuid,
            code:this.registereForm.code,
            mchId:machId,
            mobile:this.registereForm.mobile,
            verifyCode:this.registereForm.verifyCode
          }
          save(addregistereForm).then(res=>{
            if(res.type== "success"){
              // alert("注册成功")
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success'
              });
            }
            setTimeout(()=>{
              this.click =true
            },3000)
            this.registereForm = {}
            this.msgpwd = ""

          }).catch(respond=>{
            setTimeout(()=>{
              this.$message.error(respond);
            },1000)
            setTimeout(()=>{
              this.click =true
            },3000)
          })
        }
    },
    checkname:function(){
      if(this.registereForm.username==""){
        this.msgame = "用户名不能为空";
      }else if(this.registereForm.username.length<4){
        this.msgame = "用户名不能少于4个";
      } else {
        this.msgame ="";
      }
    },
    checkpassword:function(){
      console.log(this.password,"321321")
      if(this.registereForm.password==""){
        this.msgpassword = "密码不能为空"
      }else{
        this.msgpassword = "";
      }
    },
    checkpwd:function(){
      if(this.registereForm.password2==""){
        this.msgpwd ="请输入确认密码"
      }else if(this.registereForm.password !=this.registereForm.password2){
        this.msgpwd = "输入密码保持一致"
      }else{
        this.msgpwd ="输入密码正确"
      }
    },
  },
  created() {
    this.getCode();
  }
}
</script>
<style scoped>

html, body, .container {
  overflow: hidden;
  background-color: white;
}

.container{
  padding: 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
   /*height: 100vh;*/
   box-sizing:border-box;
}
header{
display: flex;
align-items: center;
justify-content: center;
  height: 80px;
  text-align: center;
}
header .header_title{
  font-size: 25px;
  color:#ff221d;
}
.item{
  padding: 25px 0 15px 0;
  display: flex;
  border-bottom:1px solid #ececec ;
}
.item_submit{
  border: none;
  display: flex;
  justify-content: center;
}

.item .send{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 30px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 22px;
}
.item .item_title{
  width: 100px;
  flex-basis: 100px;
  color:#181818;
  text-align: left;
  font-size: 15px;
  word-break:keep-all; /* 不换行 */
  white-space:nowrap; /* 不换行 */

}

input{
  border: 0px;
  outline:none;
  box-shadow:none;
  background:#FFFFFF;
  font-size: 15px;
}

.item .sumbit{
  border: none;
  border-radius: 20px;
  height: 33px;
  line-height: 33px;
  width: 100%;
  background-color:rgb(225, 40, 28);
  color: white;
  font-size: 0.75rem;
  pointer-events: auto;
}
.item .sumbit1{
  pointer-events: none;
  border: none;
  border-radius: 20px;
  height: 33px;
  line-height: 33px;
  width: 100%;
  background-color:rgb(225, 40, 28);
  color: white;
  font-size: 0.75rem;
}
.pointer-auto{
  pointer-events: auto;
}
.pointer-none{
pointer-events: none;
}

span{
  position: absolute;
  right: 20px;
  color: red;
}
footer{
  padding: 0px 25px 25px 25px;
}
.item .verification{
  padding: 3px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border:1px solid grey;
}
.verification-text{
  font-size: 30px;
  display: flex;
  justify-content: center;
}
.verification-span{
  position:relative;
  right: 0;
  color: #181818;
}
.verification-item{
  display: flex;
  justify-content: space-between;
}
.verification{
  border-radius: 8px;
}
.buttonClass{
  background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));
}

</style>
